<template>
  <Header></Header>
  <div class="course">
    <div class="course-top">
      <div>
        <div><span>课程方向</span><el-icon :size="10"><ArrowRightBold /></el-icon></div>
        <ul>
          <li class="active">全部</li>
          <li v-for="item in course1List" :key="item.id" @click="getCourse2(item.id)" :class="item.id==current1Id?'active':''">{{item.categoryName}}</li>
        </ul>
      </div>
      <div>
        <div><span>课程分类</span><el-icon :size="10"><ArrowRightBold /></el-icon></div>
        <ul>
          <li class="active">全部</li>
          <li v-for="item in course2List" :key="item.id" @click="getCourseDetail(item.id)" :class="item.id==current2Id?'active':''">{{item.categoryName}}</li>
        </ul>
      </div>
      <div>
        <div><span>课程难度</span><el-icon :size="10"><ArrowRightBold /></el-icon></div>
        <ul>
          <li class="active">全部</li>
          <li>初级</li>
          <li>中级</li>
          <li>高级</li>
        </ul>
      </div>
    </div>
    <div class="course-center">
      <div class="center-top">
        <ul>
          <li class="active">综合</li>
          <li>|</li>
          <li>最新课程</li>
          <li>|</li>
          <li>最多购买</li>
          <li>|</li>
          <li style="display:flex;margin:auto;">
            <span>价格</span>
            <span><el-icon><DCaret /></el-icon></span>
          </li>
        </ul>
        <div class="select">
          <el-checkbox label="免费课程" size="large"/>
          <el-checkbox label="会员课程" size="large"/>
        </div>
      </div>
      <div class="center-content">
        <ul class="center-course">
          <li v-for="item in course" :key="item.id">
            <div class="course-item" @click="goCourseDetail(item)">
              <img :src="item.courseCover" alt="" :title="item.courseName">
              <div>
                <p style="color:#333333;font-weight:700;">{{item.courseName}}</p>
                <p style="font-size:12px;color:#808080;">中级·{{item.purchaseCnt}}人报名</p>
                <p style="font-size:12px;color:#3580ff;display:flex;margin:auto;">免费学习<el-icon style="margin-left:5px;"><Bicycle /></el-icon></p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="course-bottom">
      <el-pagination background layout="prev, pager, next, total" v-model:current-page="currentPage" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" />
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
//引入vue组合式api
import {ref,onMounted,reactive} from 'vue'
//引入组件
import Header from "@/components/common/Header.vue"
import Footer from "../components/common/Footer.vue"
//element ui-icon
import {ArrowRightBold,DCaret,Bicycle} from '@element-plus/icons-vue'
//element 组件 手动引入
import {ElIcon,ElCheckbox,ElPagination} from "element-plus"
//引入请求api
import {reqFirstCategorys,reqSecondCategorys,reqSearchCourse} from "@/api/slider.js"
//引入路由相关功能函数
import {useRouter,useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()

//一级课程
let course1List = ref([])
//当前鼠标停留的一级课程id
let current1Id = ref(0)
//二级课程
let course2List = ref([])
//当前鼠标单击的二级课程id
let current2Id = ref(0)
//查询课程列表
let course = ref([])

//分页器相关数据
let currentPage = ref(1)
let pageSize = ref(8)
let total = ref(10)
const handleCurrentChange = (val) => {
  currentPage.value = val
  getCourse()
}

//查询课程数据所需要的相关参数
let searchCourse = reactive({
  pageNum:currentPage.value,
  pageSize:pageSize.value,
  entity:{
    firstCategory:"",
    secondCategory:"",
    /**
     * 其它功能未做:课程难度\综合、最新课程、最多购买、价格\会员课程、免费课程
    */
  }
})

//鼠标单击一级课程事件
function getCourse2(id){
  searchCourse.entity.firstCategory = ""
  searchCourse.entity.secondCategory = ""

  current1Id.value = id
  searchCourse.entity.firstCategory = id;
  getCourse()
  reqSecondCategorys({categoryId:id}).then(res=>{
    course2List.value = res.data.list
    console.log('二级课程api成功',res);
  })
}
//鼠标单击二级课程事件
function getCourseDetail(id){
  current2Id.value = id
  searchCourse.entity.secondCategory = id
  getCourse()
}

//点击课程跳转到详情页
const goCourseDetail = (item)=>{
  // console.log(item.id);
  router.push({path:"/course/detail",query:{courseId:item.id}})
}

//生命周期
onMounted(()=>{
  //课程方向，课程一级
  reqFirstCategorys(searchCourse).then(res=>{
    course1List.value = res.data.list
    console.log('一级课程api成功',res);
  })
  //获取所有课程详情
  getCourse()
})
//获取所有课程数据
const getCourse = ()=>{
   reqSearchCourse(searchCourse).then(res=>{
    course.value = res.data.pageInfo.list
    total.value = res.data.pageInfo.total
    console.log("课程查询成功",res);
  })
}
</script>

<style scoped>
.course{
  margin: 20px 0;
}
.course-top{
  width:1000px;
  margin: 30px auto;
  background: #f3f5f9;
}
.course-top>div{
  display: flex;
  justify-content:flex-start;
  margin: 20px 0;
}
.course-top>div>div{
  margin: 0 20px;
  padding:6px;
}
.course-top>div>div span{
  margin-right: 20px;
  font-size:15px;
  font-weight: 700;
  cursor:pointer;
}
.course-top>div>ul{
  display: flex;
  flex-wrap: wrap;
}
.course-top>div>ul li{
  margin: 0 20px;
  font-size:14px;
  padding:6px;
  cursor:pointer;
}
.course-top>div>ul li:hover{
  color: #388fff;
  background: rgba(44,128,255,.1);
  border-radius: 5px;
}
.course-top>div>ul .active{
  color: #388fff;
  background: rgba(44,128,255,.1);
  border-radius: 5px;
}
/* 中间部分 */
.course-center{
  width: 1000px;
  margin: 20px auto;
}
.course-center .center-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-center .center-top ul{
  display: flex;
}
.course-center .center-top ul li{
  margin:0 10px;
  cursor: pointer;
}
.course-center .center-top ul li.active{
  color:#388fff;
}
.course-center .center-top>div{
  color:#808080;
}
/* 中间课程部分 */
.course-center .center-course{
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.course-center .center-course li{
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.course-center .center-course li>div{
  width: 230px;
  height: 225px;
}
.course-center .center-course li>div img{
  width: 230px;
  height: 135px;
}
.course-center .center-course li>div div{
  margin: 10px 7px;
}
.course-center .center-course li>div div p{
  margin: 10px 0;
  cursor: pointer;
}
/* 底部，分页器 */
.course-bottom{
  width:1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
</style>